{include file='public/header'}
<style>
	.q_section2 .left{
		width: 100%;
	}
</style>
<style>

	/*弹框样式*/
	.imgzoom_pack{
		width:100%;
		height:100%;
		position:fixed;
		left:0;
		top:0;
		background:rgba(0,0,0,.7);
		display:none;
		z-index: 99999999;
	}
	.imgzoom_pack .imgzoom_x{
		color:#fff;
		height:30px;
		width:30px;
		line-height:30px;
		background:#000;
		text-align:center;
		position:absolute;
		right:5px;
		top:5px;
		z-index:9999999;
		cursor:pointer;
	}
	.imgzoom_pack .imgzoom_img{
		width:100%;
		height:100%;
		position:absolute;
		left:0;
		top:0;
		overflow:hidden;
	}
	.imgzoom_pack .imgzoom_img img{
		width:100%;
		position:absolute;
		top:50%;
	}
</style>
<body>
	<div class="q_section1">
		<div class="container clearfix">
			<div class="a1">
				<a href="javascript:history.back();">
					<img src="__PUBLIC__/home/images/a19.png" alt="">
				</a>
			</div>
			<div class="a2" style="text-align: center">
				<!--<form action="">-->
					<!--<div class="f1">-->
						<!--<img src="__PUBLIC__/home/images/a20.png" alt="" class="im1">-->
						<!--<input type="text" class="input1" >-->
					<!--</div>-->
				<!--</form>-->
				<span>查询结果</span>
			</div>
			<div class="a4">
				<a href="{:url('Cart/index')}">
					<img src="__PUBLIC__/home/images/a26.png" alt="">
					<span class="s1 cart_num">{$cart_num}</span>
				</a>
			</div>
		</div>
	</div>
	<div class="q_section2">
		<div class="container clearfix">
			<div class="left clearfix">
				<div class="a1">
					<span class="s1">综合排序</span>
					<img src="__PUBLIC__/home/images/a22_1.png" alt="">
					<div class="list searchCon">
						<ul>
							<li>
								<a href="javascript:;" data-sort_key="" data-sort_type="">综合排序</a>
							</li>
							<li>
								<a href="javascript:;" data-sort_key="price" data-sort_type="asc">价格由低到高</a>
							</li>
							<li>
								<a href="javascript:;" data-sort_key="price" data-sort_type="desc">价格由高到低</a>
							</li>
							<li>
								<a href="javascript:;" data-sort_key="comment" data-sort_type="desc">好评率</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="a1 sort" data-sort_key="sales_nums" data-sort_type="asc">
					<span class="s1">销量排序</span>
					<img src="__PUBLIC__/home/images/a22_1.png" alt="">
				</div>
				<div class="a1 sort" data-sort_key="update_time" data-sort_type="asc">
					<span class="s1">新品上架</span>
					<img src="__PUBLIC__/home/images/a22_1.png" alt="">
				</div>
			</div>
		</div>
	</div>
	<div class="q_section3" id="wrapper" style="top: 90px;">
		<ul class="clearfix" id="ulData">
		</ul>
		<!--上拉加载模块-->
		<div id="pullUp">
			<span class="pullUpLabel"></span>
		</div>
		<div id="endData" style="display: none; ">
			<span class="dataEnd">--我是有底线的--</span>
		</div>
		<!--上拉加载模块-->
	</div>

	<!-- 规格 -->
	<div class="guige">
		<div class="guige_1">
			<img src="__PUBLIC__/home/images/a79.png" alt="" class="im1 close_btn">
			<div class="title clearfix">
				<div class="logo big_show">
					<img src="__PUBLIC__/home/images/a14.png" alt="">
				</div>
				<div class="center" style="width: 75%;">
					<p class="p1 chao">高大上家居高大上家居高大上家居高大上家居高大上家居</p>
					<p class="p2">￥69.00</p>
				</div>
			</div>
			<div class="list"  style="max-height: 150px; overflow-y: scroll;">
				<ul class="clearfix good_options">
				</ul>
			</div>
			<div class="last clearfix">
				<p class="p1">数量</p>
				<p class="p2">
					<img src="__PUBLIC__/home/images/a78.png" alt="" class="del_btn">
					<span class="s1 spec_num">1</span>
					<img src="__PUBLIC__/home/images/a77.png" alt="" class="add_btn">
				</p>
			</div>
			<div class="next">
				<a href="javascript:;" class="addCartSpec">确定</a>
			</div>
		</div>
	</div>
	<section class="imgzoom_pack" style="z-index: 9999999;">
		<div class="imgzoom_x">X</div>
		<div class="imgzoom_img"><img src="" /></div>
	</section>

</body>

<script src="__PUBLIC__/home/js/scale.js"></script>
<script>
	document.addEventListener("DOMContentLoaded", function(event){
		ImagesZoom.init({
			"elem": ".big_show"
		});
	}, false);
</script>
<script>
	$(function(){
		$("#list2").css("height",($(window).height())-90)
		$("#list2").css("width",($(window).width()))
		$(".searchCon li a").on("click", function () {
			let sort_key = $(this).data("sort_key"), html_text = $(this).text(), sort_type = $(this).data("sort_type");
			$(this).parents(".a1").find("span").html(html_text);
			query.sort_key = sort_key;
			query.sort_type = sort_type;
			p = 1;
			isRefresh=true;
			document.getElementById("ulData").innerHTML = "";
			loadData();
		})
		$(".sort").on("click", function () {
			let sort_key = $(this).data("sort_key"), sort_type = $(this).data("sort_type");
			if(sort_type == "asc"){
				sort_type = "desc";
			}else{
				sort_type = "asc";
			}
			query.sort_key = sort_key;
			query.sort_type = sort_type;
			p = 1;
			isRefresh=true;
			document.getElementById("ulData").innerHTML = "";
			loadData();
		})
		$("#ulData").on("click", "li", function (event) {
			event.stopPropagation();
			let good_id = $(this).data("good_id");
			location.href = "{:url('Goods/detail')}?good_id="+good_id
		})


		$(".close_btn").click(function () {
			$(".guige").hide()
		})
		$(".del_btn").click(function () {
			let origin_num = parseInt($(".spec_num").text());
			if(origin_num-1<=0){
				return false;
			}else{
				$(".spec_num").text(origin_num-1);
			}
		});
		$(".add_btn").click(function () {
			let origin_num = parseInt($(".spec_num").text());
			$(".spec_num").text(origin_num+1);
		});
		$(".q_section2 .a1").click(function(){
			$(this).children('.list').toggle()
		})
		//加入购物车
		$("#ulData").on("click", ".addCart", function (event) {
			event.stopPropagation();
			let good_id = $(this).data("good_id"), use_spec = $(this).data("spec"), price = $(this).data("price");
			if(use_spec == 0){
				if(isNaN(price)){
					modal.msg("品牌会员才可购买");
					return;
				}
				//直接加入购物车
				$.post("{:url('Cart/addCart')}", {good_id:good_id, spec_id:0}, function (res) {

					if(res.result_code == "1111"){
						location.href="{:url('Index/login')}";
					}
					if(res.result_code==0){
						$(".cart_num").html(res.result_data);
					}
					modal.msg(res.result_info);
				});
			}else{
				//拉取规格信息
				$.post("{:url('Goods/getOptions')}", {good_id:good_id}, function (res) {
					if(res.result_code == 0){
						let good = res.result_data.good, options=res.result_data.options;
						$(".guige_1 .title .logo img").attr("src", good.good_img_url);
						$(".guige_1 .title .center .p1").html(good.good_title);
						$(".guige_1 .title .center .p2").html("￥"+good.good_price);
						let _li = "";
						$.each(options, function (i,v) {
							_li += '<li><span class="s1" data-spec_id="'+v.spec_id+'" data-good_id="'+v.good_id+'" data-spec_img="'+v.img_url+'" data-spec_price="'+v.spec_price+'" data-spec_title="'+v.spec_title+'">'+v.spec_title+'</span></li>'
						});
						$(".good_options").html(_li);
						$(".last .spec_num").html(1);
						$(".guige").show();
					}else{
						modal.msg(res.result_info);
					}
				});
			}
		})

		//选中规格更改购买信息
		$(".good_options").on("click", "li span", function () {
			let data = $(this).data();
			$(".guige_1 .title .logo img").attr("src", data.spec_img);
			$(".guige_1 .title .center .p1").html(data.spec_title);
			$(".guige_1 .title .center .p2").html("￥"+data.spec_price);
			$(this).parent().siblings().find("span").removeClass("select");
			$(this).addClass("select");
		})

		//规格加入购物车
		$(".addCartSpec").on("click", function () {
			let data = $(".good_options").find(".select").data();
			if(typeof data == "undefined"){
				modal.msg("你还未选择规格");
				return ;
			}
			if(isNaN(data.spec_price)){
				modal.msg("品牌会员才可购买");
				return ;
			}else{
				//直接加入购物车
				let spec_num = parseInt($(".spec_num").text());
				$.post("{:url('Cart/addCart')}", {good_id:data.good_id, spec_id:data.spec_id, num:spec_num}, function (res) {

					if(res.result_code == "1111"){
						location.href="{:url('Index/login')}";
					}
					if(res.result_code==0){
						$(".cart_num").html(res.result_data);
					}
					modal.msg(res.result_info);
				});
			}
		})
	})

	var query = {
		sort_key:"",
		sort_type:"",
		keywords:"{$keywords}"
	};
	var mScroll;
	var isRefresh = true;
	var p = 1; //当前页码
	var onePageCount = 20; //每页显示多少个
	var end=false;
	window.onload = function() {
		mScroll = PullDownAddUP("wrapper", function(loadType) {
			if (loadType == "refresh") { //下拉刷新
				isRefresh = true;
			} else { //上拉加载
				isRefresh = false;
				if(end){
					return true;
				}
			}
			loadData();
		});
		loadData();
	}
	function loadData() {
		if (isRefresh) {
			p = 1;
			$("#pullUp").show();
			$("#endData").hide();
			end = false;
			document.getElementById("ulData").innerHTML = "";
		} else {
			p++;
		}
		let index = modal.loading();
		//加载渲染数据
		query.page=p;
		query.pageNum = onePageCount;
		$.post(location.href, query, function (res) {
			modal.close(index);
			if(res.result_code == 0){
				let data = res.result_data;
				let _li = "";
				if(data.length<onePageCount){
					$("#pullUp").hide();
					$("#endData").show();
					end = true;
				}
				$.each(data, function (i,v) {
					_li += '<li class="clearfix" data-good_id="'+v.id+'">' +
							'	<div class="logo">' +
							'		<a href="javascript:;"><img src="'+v.img_url+'" alt=""></a>' +
							'	</div>' +
							'	<div class="center">' +
							'		<a href="javascript:;">' +
							'			<p class="p1 chao">'+v.title+'</p>' +
							'			<p class="p2"><span class="s1">'+v.brand_title+'</span></p>' +
							'		</a>' +
							'		<p class="p3 clearfix">' +
							'			<span class="s1">'+v.price+'</span>' +
							'			<a href="javascript:;" class="addCart" data-good_id="'+v.id+'" data-spec="'+v.use_spec+'" data-price="'+v.price+'">' +
							'				<img src="__PUBLIC__/home/images/a25.png" alt="">' +
							'			</a>' +
							'		</p>' +
							'	</div>' +
							'</li>';
				});
				$("#ulData").append(_li);
				mScroll.refresh();
			}else{
				// mScroll.destroy();
				end = true;
				modal.msg(res.result_info);
			}
		});
	}
</script>
</html>